<template>
	<view>
		<cover-view :style="{top:statusHeight+'px'}" class="video-control u-f-r">
			<cover-image class="backImg" src="https://statics.xmcsrv.net/weixin/video-back.png" @click="backAction">
			</cover-image>
			<cover-view class="loading-box" v-if="!isLoading">
				<cover-view class="navTitle">{{navTitle}}</cover-view>
			</cover-view>
			<!-- 加载提示信息 -->
			<cover-view class="loading-box" v-if="isLoading">
				<cover-view class="loading">{{ loadingText }}</cover-view>
			</cover-view>
		</cover-view>
		<!-- 网速 -->
		<view class="netSpeed" :style="{top:navBarHeight+'px'}">{{netSpeed}}</view>
		<!-- && TailoredInfo.bs != 3 -->
		<view class="cell-box" :style="{top:navBarHeight+'px'}">
			<view class="cell cell—up" v-if="bl">
				<view :style="{color:colorbg(bl)}" class="cell-text"></view>
				<j-electric :ElectricQuantity="bl > 0 ? bl : 0" isElectric></j-electric>
			</view>
		</view>
		<view class="wifi-box" :style="{top:navBarHeight+'px'}">
			<image style="width: 40rpx;height: 40rpx;" :src="wifiUrl" mode="">
			</image>
		</view>
		<cover-view class="u-f-ajc u-f-c sheet" v-if="isShowHD">
			<cover-view class="u-f-ajc item" v-for="(item,index) in hdList" :key="index" @click="selectHd(item)">
				{{item.label}}
			</cover-view>
		</cover-view>
		<cover-view class="u-f-c right-control">
			<cover-view class="u-f-ajc  item" v-for="(item,index) in rightList" :key="index" @click="clickFunc(item)">
				<cover-image :src="item.icon" class="img"></cover-image>
			</cover-view>
		</cover-view>
		<!-- 显示网速 -->
		<cover-view v-if="envVersion!='release'" class="float">
			<!-- <cover-view>当前视频帧率：{{videoFPS}}</cover-view> -->
			<cover-view>缓冲的视频总时长：{{videoCache}}ms</cover-view>
			<cover-view>缓冲的音频总时长：{{audioCache}}ms</cover-view>
			<cover-view>音画同步错位时间（播放）：{{avPlayInterval}}ms</cover-view>
			<cover-view>音画同步错位时间（网络）：{{avRecvInterval}}ms</cover-view>
			<cover-view>网络抖动情况：{{netJitter}}</cover-view>
			<cover-view>网络质量：{{netQualityLevel}}</cover-view>
			<cover-view>缓冲的总视频帧数：{{vSumCacheSize}}</cover-view>
		</cover-view>
		<!-- 播放暂停按钮  -->
		<view v-if="isShowPlayBtn" class="rePlay u-f-ajc" :style="{top:playHeight/2+'px'}" @click="continuePlay">
			<image src="https://statics.xmcsrv.net/weixin/replay.png"  class="img"></image>
		</view>
		<!-- 截图显示后的图片 -->
		<view v-if="isCapture" class="capture u-f-ajc" :style="{bottom:bottomHeight+'px'}" @click="shareCapture">
			<image :src="captureUrl"  class="img"></image>
			<view class="u-f-ajc descV">哇！拍到一张美照，点击分享</view>
		</view>
		<!-- 视频预览 -->
		<view style="width: 100%;background: black;" :style="{height:playHeight+'px'}">
			<live-player v-if="isShowPlayer" id="livePlayer" :src="url" :min-cache="cacheMinTime" :max-cache="cacheMaxTime"
				:autoplay="isPlay" mode="live" @statechange="statechange" :muted="isMute" :auto-pause-if-navigate="false"
				:auto-pause-if-open-native="false" @error="error" style="width: 100%;" :style="{height:playHeight+'px'}"
				object-fit="fillCrop" @audiovolumenotify="bindaudiovolumenotify" @netstatus="netstatusChange"/>
		</view>
		<!-- 对讲组件 -->
		<cover-view
			style="width: 10rpx;height: 10rpx;position: absolute;bottom: 120rpx;left:50%;background: transparent;transform: translateX(-50%);">
			<live-pusher v-if="isShowPush" id="pushLive" class="live" style="width: 1rpx;height: 1rpx;background: blue;"
				:url="talkUrl" mode="live" :autopush="isPush" :enable-camera="false" :enable-agc="true"
				:enable-mic="true" :enable-ans="true" @statechange="statechange2" @error="error2"
				audio-volume-type="voicecall" :max-bitrate="600" audio-quality="low" :voice-changer-type="voiceType">
			</live-pusher>
		</cover-view>
		<view class="u-f-r bottom-control" :style="{height:bottomHeight+'px'}">
			<view class="u-f u-f-end voice" style="">
				<view class="item1">
					<view class="chooseVoice u-f-ajc" @click="showVoice">{{voiceTypeDesc}}
						<uni-icons v-if="isShowVocie" type="top" size="25"></uni-icons>
						<uni-icons v-else type="bottom" size="25"></uni-icons>
					</view>
					<view v-if="isShowVocie" class="voiceType">
						<view class="item" :class="{'active':item.selected}" v-for="(item,index) in voiceList" :key="index" @click="chooseVoice(item)">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="u-f-ajc" style="width: 100%;">
				<template v-if="appletIdentify==generalIdentify">
					<view  class="item item1">
						<image src="https://statics.xmcsrv.net/weixin/live/operation/cancel.png" class="genlImg" @click="backAction"></image>
						<view>取消</view>
					</view>
					<view class="item item2">
						<image v-if="isPush" src="https://statics.xmcsrv.net/weixin/talk3-lexin.gif" class="img2" @click="startPush"></image>
						<image v-else src="https://statics.xmcsrv.net/weixin/talk-lexin.png" class="img2" @click="startPush"></image>
						<view>点击开始对讲</view>
					</view>
					<view  class="item item1">
						<view v-if="isShowLock" class="u-f-ajc" style="flex-direction: column;">
							<image :src="unlockIcon" class="genlImg" @click="unlockClick"></image>
							<view>开锁</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view  class="item item1">
						<view v-if="isShowLock" class="u-f-ajc" style="flex-direction: column;">
							<image :src="unlockIcon" class="img1" @click="unlockClick"></image>
							<view>远程开锁</view>
						</view>
					</view>
					<view class="item item2">
						<image :src="talkIcon" class="img2" @click="startPush"></image>
						<view>点击开始对讲</view>
					</view>
					<view  class="item item1">
						<image :src="tempIcon" class="img1" @click="tempPassClick"></image>
						<view>临时密码</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 登录 -->
		<j-device-login ref="deviceLogin" :device="device" @submit="submit"></j-device-login>
		<!-- 开锁弹框 -->
		<uni-popup ref="inputDialog" type="dialog" class="popupName">
			<view class="form">
				<view class="u-f-ajc title">是否打开门锁？</view>
				<view class="u-f-r form-item">
					<view class="u-f-ajc cancel" @click="cancel">取消</view>
					<view class="u-f-ajc conf" @click="confimeUnlock(1,'lexin',lastMsgTime)">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 设备状态弹窗 -->
		<j-modal :value="LightSleepStatus" :showCancel="false" title="提示" @ok="closeSleepStatusPopup('LightSleep')">
			<view slot="content">
				设备已进入浅度休眠状态，可点击画面上的播放按钮继续预览
			</view>
		</j-modal>
		<j-modal :value="DeepSleepStatus" :showCancel="false" title="提示" @ok="closeSleepStatusPopup('DeepSleep')">
			<view slot="content">
				设备已进入深度休眠状态，请手动唤醒后继续访问设备
			</view>
		</j-modal>
		<j-modal :value="noDataStatus" title="提示" @cancel="closeSleepStatusPopup('back')" @ok="closeSleepStatusPopup('noData')">
			<view slot="content">
				获取视频数据超时,是否重试?
			</view>
		</j-modal>
		<j-modal :value="clickTalkStatus" title="提示" :showCancel="false" @ok="closeSleepStatusPopup('closeTalkStatus')">
			<view slot="content">
				设备操作过于频繁，请稍后再试
			</view>
		</j-modal>
		<r-canvas ref="rCanvas"></r-canvas>
        <j-share ref="share" :captureUrl="captureUrl"></j-share>
	</view>
</template>

<script>
	import {
		liveMixins
	} from './mixins/live.js'
	const {convertdBm2RSSI} = require('@/utils/util.js');
	import rCanvas from "../../../components/r-canvas/r-canvas.vue"
	// const {wsRequest} = require('@/utils/websocket.js');
	// import wsRequest from '@/utils/websocket.js';
	export default {
		mixins: [liveMixins],
		components: {
			rCanvas
		},
		data() {
			return {
				statusHeight: 0,
				bottomHeight: '',
				isShowVocie: false,
				voiceType: 0, //0 原声  2 萝莉  3 大叔
				voiceTypeDesc: '原声',
				voiceList: [{
						title: "原声",
						icon: '',
						selected: true,
						id: 0,
					},
					{
						title: "成熟大叔",
						icon: '',
						selected: false,
						id: 3,
					},
					{
						title: "甜美女声",
						icon: '',
						selected: false,
						id: 2,
					}
				],
				rightList:[
					{icon:'https://statics.xmcsrv.net/weixin/message.png',id:'msg',url:'./cloudMsg'},
					{icon:'https://statics.xmcsrv.net/weixin/capture.png',id:'capture'},
					{icon:'https://statics.xmcsrv.net/weixin/soundoff2.png',id:'sound'},
					{icon:'https://statics.xmcsrv.net/weixin/door-setting.png',id:'setting',url:'./setting/setting-lexin'}
				],
				websocket: null,
				wsWifiUrl:0,
				// deviceStatus:'',
				playHeight:'',
				currentTime:0,
				disConnectCount:0,
				isShowDeepSleepModal:false,
				isShowLightSleepModal:false,
				isShowDelModal:false,
				videoFPS:0,
				netJitter:0,
				netQualityLevel:0,
				vSumCacheSize:0,
				videoCache:'',
				audioCache:'',
				avPlayInterval:'',
				avRecvInterval:'',
				LightSleepStatus:false,
				DeepSleepStatus:false,
				tempIcon:'https://statics.xmcsrv.net/weixin/temporary2.png',
				lastMsgTime:0,//每次开锁成功时获取最新的一次门铃来电消息时间
				
			}
		},
		onLoad(options) {
			// this.pathType = options.pathType?options.pathType:null
			this.currentTime = new Date().getTime()
			if(this.appletIdentify==this.generalIdentify){
				this.unlockIcon = "https://statics.xmcsrv.net/weixin/live/operation/unlocking2.png"
			}else{
				this.unlockIcon = "https://statics.xmcsrv.net/weixin/lock2.png"
			}
			this.stream = '0'  
		},
		onReady() {
			// this.LightSleepStatus = true
			// this.isShowPlayBtn = true
			this.initCanvas()
		},
		onHide() {
			this.isShowPlayBtn = false
		},
		onShow() {
			this.isShowLightSleepModal = false
			let deviceList = uni.getStorageSync('deviceList');
			for (let i = 0; i < deviceList.length; i++) {
			    const item = deviceList[i];
			    if (item.deviceNo === this.device.deviceNo) {
				    // this.navTitle = item.deviceName;
				    break;
			    }
			}
		},
		onUnload() {
		},
		methods: {
			initCanvas(){
				this.$nextTick(async () => {
					console.log("this.$refs.rCanvas ===",this.$refs.rCanvas);
					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas",
						scale:1,
						// canvas_width:652,
						// canvas_height:1159.1,
						canvas_width: this.scanvsWidth,//260,//366.75,
						canvas_height: this.scanvsHeight,//462,//652,
						hidden:true
					})
				})
			},
			// // 网络状态变化
			// netstatusChange(e){
			// 	// console.log('网络状态==',e.detail.info);
			// 	let info = e.detail.info
			// 	this.netSpeed = info.netSpeed != 0 ?(Number(info.netSpeed)/8).toFixed(2) + ' KB/S':this.netSpeed
			// 	if(this.isStartPlay){
			// 		if(info.netSpeed == 0){
			// 			this.disConnectCount ++
			// 			if(this.disConnectCount == 15){
			// 				this.videoContext.stop();
			// 				this.isShowPlayBtn = true
			// 				this.playType = 1
			// 				uni.showToast({
			// 					title:'网络已断开，请重试',
			// 					icon:'none'
			// 				})
			// 			}
			// 			this.$logs({info:'网络状态变化-网络已断开',disConnectCount:this.disConnectCount})
			// 		}else{
			// 			this.playType = 0
			// 			this.disConnectCount = 0
			// 		}
			// 	}
			// 	this.videoFPS = info.videoFPS
			// 	this.netJitter = info.netJitter
			// 	this.netQualityLevel = info.netQualityLevel
			// 	this.vSumCacheSize = info.vSumCacheSize
			// 	this.videoCache = info.videoCache
			// 	this.audioCache = info.audioCache
			// 	this.avPlayInterval = info.avPlayInterval
			// 	this.avRecvInterval = info.avRecvInterval
			// },
			//获取可视区域高度
			getClineHeight() {
				uni.getSystemInfo({
					success: (res => {
						this.playHeight = res.screenHeight * (2.9 / 4)
						this.bottomHeight = res.screenHeight * (1.1 / 4)
						this.statusHeight = res.statusBarHeight
					})
				});
			},
			//展示声音列表
			showVoice() {
				this.isShowVocie = !this.isShowVocie
			},
			//选择声音
			chooseVoice(item) {
				this.voiceTypeDesc = item.title
				this.voiceType = item.id
				this.voiceList.forEach((i) => {
					if (i.id == item.id) {
						i.selected = true
					} else {
						i.selected = false
					}
				})
				this.isShowVocie = false
			},
			// 临时密码
			tempPassClick(){
				uni.navigateTo({
					url: `./temporaryLx?device=${encodeURIComponent(JSON.stringify(this.device))}`
				})
			},
			//开始推送
			startPush() {
				console.log('开始对讲');
				if(this.deviceStatus == 'LightSleep'){
					return uni.showToast({
						title:'设备处于浅休眠状态不能开启对讲',
						icon:'none'
					})
				}
				let time = new Date().getTime()
				if(!this.isPush){
					if((this.lastClickTalkTimeStamp + 1000)>time){
						this.clickTalkStatus = true
						return
					}else{
						this.lastClickTalkTimeStamp = time
					}
				}
				if(this.talkUrl){
					this.dealwithSpeak()
				}else{
					this.getTalkBackUrl((url)=>{
						if(url){
							this.dealwithSpeak()
						}
					},1)
				}
			},
			//右边控制栏
			clickFunc2(index) {
				let urlList = ['./cloudMsg', '','./msgDetail', './temporaryBk', './setting/setting-lexin']
				if (index == 3) {
					this.isMute = !this.isMute
					this.isClose = !this.isClose
					if (this.isMute) {
						this.rightList[3] = this.soundOffIcon
					} else {
						this.rightList[3] = this.soundOnIcon
					}
				} else if(index == 1){  //截图
					if(this.deviceStatus == 'LightSleep'){
						uni.showToast({
							title:'需要在视频播放状态下才能操作',
							icon:'none'
						})
						return
					}
					this.getLivePlayerSnapShot()
				}else {
					this.autoPause = true
					if (index == 0 || index == 2) {
						// this.autoPause = true
						this.deviceLogOut()
						if (!this.isMute) {
							this.isClose = true
							this.isMute = !this.isMute
						}
					}
					if (index == 4) {
						this.hideType = 2
					}
					uni.navigateTo({
						url: `${urlList[index]}?device=${encodeURIComponent(JSON.stringify(this.device))}`
					})
				}
			},
			onBack(){
				if(this.pathType){
					uni.navigateBack({
					  delta: 1
					})
				}else{
					uni.switchTab({
						url: '/jvss/pages/device/home'
					})
				}
			}
		}

	};
</script>
<style lang="scss">

    .popupName {
        /deep/ .uni-popup__wrapper {
            top: -100rpx;
        }
    }
	page {
		overflow: hidden;
	}

	/deep/ .uni-navbar--border {
		border-bottom: none !important;
		background: transparent !important;
	}

	// /deep/ .uni-cover-view{
	// 	overflow: visible !important;
	// }
	.cell-box {
		position: absolute;
		z-index: 999;
		// top: 10rpx;
		left: 10rpx;
		display: flex;


		.cell {
			color: #FF0025;
			display: flex;
			align-items: center;
			height: 45rpx;
			font-size: 20rpx;

			// line-height: 50rpx;
			.cell-text {
				margin: 0 10rpx;
			}
		}
	}
	.netSpeed {
		position: absolute;
		top: 10rpx;
		z-index: 999;
		left:50%;
		transform: translateX(-50%);
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.wifi-box {
		position: absolute;
		top: 10rpx;
		right: 30rpx;
		z-index: 999;
	}

	.video-control {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.loading-box {
		// width: 50%;
		// height: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
		z-index: 99;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.rePlay{
		z-index: 99;
		width: 244rpx;
		height: 244rpx;
		position: absolute;
		top: 200rpx;
		left:50%;
		transform: translateX(-50%);
		.img {
			width: 122rpx;
			height: 122rpx;
		}
	}
	.backImg {
		width: 32rpx;
		height: 32rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.hd {
		position: absolute;
		right: 50rpx;
		top: 20rpx;
		z-index: 110;
		color: #ffffff;
		font-size: 26rpx;
		width: 140rpx;
		height: 50rpx;
		background: rgba(0, 0, 0, 0.39);
		border-radius: 25rpx;
	}

	.sheet {
		z-index: 99;
		position: absolute;
		width: 150rpx;
		top: 90rpx;
		right: 40rpx;
		background: white;
		padding: 0rpx 30rpx 30rpx;
		border-radius: 16rpx;

		.item {
			margin-top: 30rpx;
			flex:1;
		}
	}

	.bottom-control {
		z-index: 99;
		position: absolute;
		height: 230rpx;
		bottom: 0rpx;
		right: 0rpx;
		left: 0rpx;
		flex-direction: column;

		.item1 {
			// margin-top: 60rpx;
			position: relative;
		}

		.item2 {
			// margin-top: 150rpx;
		}

		.item {
			flex: 1;
			height: 100%;
			flex-direction: column;
			display: flex;
			align-items: center;
			// justify-content: flex-start;
			justify-content: center;

			.img {
				width: 96rpx;
				height: 96rpx;
				margin: 0 40rpx;
			}

			.img2 {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 20rpx;
			}

			.img1 {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
			.genlImg{
				width: 140rpx;
				height: 140rpx;
				margin-bottom: 20rpx;
			}
		}

		.voice{
			padding: 30rpx 30rpx 0 30rpx;
		}
		.chooseVoice {
			border: 1px solid #333;
			border-radius: 10rpx;
			height: 60rpx;
			padding: 0 10rpx;
			position: relative;
		}
		.voiceType {
			position: absolute;
			// left: 0;
			right: 0;
			width: 200rpx;
			border: 1px solid #333;
			background: white;
			padding: 10rpx;
			border-radius: 10rpx;
			top: -240rpx;

			.item {
				padding: 15rpx;
			}

			.item:not(:last-child) {
				border-bottom: 1px solid #333;
			}

			.active {
				color: #FF0025;
			}

		}

	}

	.right-control {
		z-index: 99;
		position: absolute;
		height: 400rpx;
		right: 30rpx;
		top: 35%;
		transform: translateY(-50%);

		.item {
			flex: 1;

			.img {
				width: 70rpx;
				height: 70rpx;
			}

		}
	}

	/deep/.uni-popup {
		z-index: 115;
	}

	.form {
		background: white;
		padding: 60rpx;
		border-radius: 10rpx;
		.msg{
			color: #000000;
			font-weight: 600;
			text-align: center;
		}
		.cont{
			font-size: 28rpx;
			text-align: center;
		}
		.confirm{
			background: #FF0025;
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
			line-height: 49rpx;
			color: #464646;
		}

		.desc {
			font-size: 22rpx;
			color: #8A8A8A;
			line-height: 84rpx;
		}

		.form-item {
			margin-top: 40rpx;

			input {
				border: 1rpx solid #A5A5A5;
				border-radius: 8rpx;
				padding: 10rpx;
			}

			.cancel {
				background: #F6F7FB;
				color: #000000;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}

			.conf {
				margin-left: 20rpx;
				background: #FF0025;
				color: #ffffff;
				font-size: 30rpx;
				width: 237rpx;
				height: 84rpx;
				border-radius: 42rpx;
			}
		}
	}

	.navTitle{
		text-align: center;
		color: #ffffff;
		font-size: 32rpx !important;
		font-weight: 700;
		white-space: nowrap;
		overflow: hidden;
		text-overflow:ellipsis;
		width: 400rpx;
		height: 72rpx;
		line-height: 72rpx;
	}
	.loading {
		width: 100%;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #ffffff;
		font-size: 24rpx;
	}

	.topbar {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		color: #ffffff;
		/* background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0)); */
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;

		.icon {
			transform: rotate(90deg);
			width: 36rpx;
			height: 36rpx;
		}
	}

	// .bottombar {
	// 	width: 100%;
	// 	position: absolute;
	// 	left: 0;
	// 	bottom: 7rpx;
	// 	z-index: 100;
	// 	color: #FFFFFF;
	// 	background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	// 	background: rgba(0, 0, 0, 0.5);
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	align-items: center;
	// }

	.icon {
		width: 72rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img {
		display: block;
		width: 36rpx;
		height: 36rpx;
	}

	.capture {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 999;
		height: 250rpx;
		// transform: translateX(-50%);
		.img{
			width: 260rpx;
			height: 200rpx;
			border: 2px solid white;
			border-radius: 5rpx;
		}
		.descV{
			background: rgba(0, 0, 0, 0.5);
			color: white;
			font-size: 24rpx;
			width: 100%;
			height: 50rpx;
		}
	}

	.jf-button {
		background: transparent;
		width: auto;
		margin: 0;
		line-height: 1.25;
	}

	.jf-button::after {
		border: none;
	}

	.video-control-extra {
		height: 10vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
	}

	.control-inner {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 35vw;
		height: 35vw;
		border-radius: 100%;
		border: 1px solid #cccccc;
	}

	.control-handle {
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
	}

	.control-top {
		top: 0;
	}

	.control-top-right {
		top: 30rpx;
		right: 30rpx;
		transform: rotate(45deg);
	}

	.control-right {
		right: 0;
		transform: rotate(90deg);
	}

	.control-right-bottom {
		right: 30rpx;
		bottom: 30rpx;
		transform: rotate(135deg);
	}

	.control-bottom {
		bottom: 0;
		transform: rotate(180deg);
	}

	.control-bottom-left {
		bottom: 30rpx;
		left: 30rpx;
		transform: rotate(225deg);
	}

	.control-left {
		left: 0;
		transform: rotate(270deg);
	}

	.control-left-top {
		left: 30rpx;
		top: 30rpx;
		transform: rotate(315deg);
	}

	.control-center {
		width: 12vw;
		height: 12vw;
		border-radius: 100%;
		background: #FF0025;
	}

	.box {
		width: 100rpx;
		height: 100rpx;
		border: 1px solid #999999;
		border-radius: 12rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.box.active {
		border: 1px solid #FF0025;
		color: #FF0025;
	}

	.cruise-empty {
		width: 100vw;
		height: 50vh;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		text-align: center;
		font-size: 24rpx;
		background: #FFFFFF;
	}

	.popup-content {
		.item {
			padding: 40rpx 0;
			flex: 1;
			justify-content: center;
			display: flex;
			align-items: center;

			.desc {
				color: #666666;
				font-size: 30rpx;
				margin-top: 10rpx;
			}

			.img {
				width: 120rpx;
				height: 120rpx;
			}

		}

		.confirm {
			font-size: 30rpx;
			color: #2CBDB8;
			height: 98rpx;
		}

		.btn {
			width: 100%;
			color: #FF0025 !important;
			border-color: #dcdcdc !important;
			background-color: #FFFFFF !important;
		}
	}
	.float{
		position: absolute;
		top: 150rpx;
		left: 20rpx;
		background: rgba(0, 0, 0, 0.5);
		color:#fff;
		font-size: 24rpx;
		padding: 10rpx;
		// background: red;
	}
</style>
